<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { registerMap, getMap } from "echarts/core";
import BorderBox13 from "../../components2/border-box-13";
import { ElMessage } from "element-plus";

withDefaults(
  defineProps<{
    // 结束数值
    title: number | string;
  }>(),
  {
    title: "运行情况",
  }
);

var config = ref({
  header: ['产品SN', '工位名称', '入站时间', '出站时间', '加工结果'],
  data:[],
  headerBGC:'',
  oddRowBGC:'',
  evenRowBGC:'',
  waitTime:'2000',
  rowNum:'10',
  carousel:'single',//轮播方式 'single'|'page'
  index: false,
  columnWidth: [150],
  align: ['center','center','center','center','center']
});
var list = [
    ['SN-2024052', '贴片工位-A1', '08:30:15', '08:45:22', '<span style="color:#37a2da;">OK</span>'],
    ['SN-2024052', '插件工位-B3', '09:15:03', '09:30:10', '<span style="color:#ff9f7f;">NG</span>'],
    ['SN-2024052', '焊接工位-C2', '10:05:47', '10:20:33', '<span style="color:#37a2da;">OK</span>'],
    ['SN-2024052', '测试工位-D5', '10:45:12', '11:00:05', '<span style="color:#ffdb5c;">TODO</span>'],
    ['SN-2024052', '贴片工位-A2', '11:30:08', '11:45:19', '<span style="color:#37a2da;">OK</span>'],
    ['SN-2024052', '组装工位-E1', '13:05:21', '13:25:36', '<span style="color:#37a2da;">OK</span>'],
    ['SN-2024052', '插件工位-B1', '14:10:11', '14:25:44', '<span style="color:#ff9f7f;">NG</span>'],
    ['SN-2024052', '焊接工位-C1', '15:00:33', '15:15:28', '<span style="color:#ffdb5c;">TODO</span>'],
    ['SN-2024052', '测试工位-D1', '15:40:09', '15:55:17', '<span style="color:#37a2da;">OK</span>'],
    ['SN-2024052', '贴片工位-A3', '16:20:55', '16:35:42', '<span style="color:#37a2da;">OK</span>'],
    ['SN-2024052', '组装工位-E1', '13:05:21', '13:25:36', '<span style="color:#37a2da;">OK</span>'],
    ['SN-2024052', '插件工位-B1', '14:10:11', '14:25:44', '<span style="color:#ff9f7f;">NG</span>'],
    ['SN-2024052', '焊接工位-C1', '15:00:33', '15:15:28', '<span style="color:#ffdb5c;">TODO</span>'],
    ['SN-2024052', '测试工位-D1', '15:40:09', '15:55:17', '<span style="color:#37a2da;">OK</span>'],
    ['SN-2024052', '贴片工位-A3', '16:20:55', '16:35:42', '<span style="color:#37a2da;">OK</span>'],
  ];

//setInterval(()=>{
  for (let index = 0; index < list.length; index++) {
    const element = list[index];
    element[0]='SN-2024052'+(Math.floor(Math.random()*1000))
  }
  config.value = {
    ...config.value,
    data:list
  };
//},1000);

</script>

<template>
  <div class="centermap" style="width: 600px;height: 600px;margin: 0 auto;">
    <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
      <BorderBox13>
        <dv-scroll-board :config="config" />
      </BorderBox13>
    </div>
  </div>
</template>

<style scoped lang="scss">
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("@/assets/images/xiezuo.png") no-repeat;
    }

    .you {
      background: url("@/assets/images/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    height: 580px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
      z-index: 10;
    }
  }
}
</style>
